<template>
  <div class="applyNowBox">
    <div class="applyContentBox">
      <!-- 立即申请 -->
      <h1 class="applyTitle">签约摄影师申请</h1>
      <div class="step">
        <el-steps :active="active" align-center>
          <el-step title="个人信息"></el-step>
          <el-step title="创作信息"></el-step>
          <el-step title="合作情况及其他"></el-step>
        </el-steps>
      </div>
      <!--个人信息 -->
      <div class="infoBox">
        <h3 class="infoTitle">个人信息</h3>
        <p class="applyDesc">你所填写的内容仅供此次征集活动使用，你的所有信息将被严格保密</p>
      </div>
      <div class="infoFrom" v-if="active==1">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="">
            <div class="formItem">姓名</div>
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="">
            <div class="formItem">姓别</div>
            <el-radio-group v-model="form.sex">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="email" label="" :rules="[
           { required: true, message: '请输入邮箱地址', trigger: 'blur' },
           { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }]">
            <div class="formItem">常用邮箱</div>
            <el-input v-model="form.email"></el-input>
            <div class="emailDesc">审核结果会发送给此邮箱</div>
          </el-form-item>
          <el-form-item label="">
            <div class="formItem">常居城市</div>
            <el-input v-model="form.city"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <!-- // 创作信息 -->
      <div class="infoFrom" v-if="active==2">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="">
            <div class="formItem">擅长的创作形式</div>
            <el-checkbox-group v-model="form.modality">
              <div class="checkboxItem">
                <el-checkbox label="照片" name="modality"></el-checkbox><br />
                <el-checkbox label="视频" name="modality"></el-checkbox><br />
                <el-checkbox label="文章" name="modality"></el-checkbox><br />
              </div>
            </el-checkbox-group>
          </el-form-item>
          <!-- 擅长的创作主题 -->
          <el-form-item label="">
            <div class="formItem">擅长的创作主题</div>
            <el-checkbox-group v-model="form.theme">
              <div class="checkboxItem">
                <el-checkbox label="风光" name="theme"></el-checkbox><br />
                <el-checkbox label="人物" name="theme"></el-checkbox><br />
                <el-checkbox label="旅拍" name="theme"></el-checkbox><br />
                <el-checkbox label="Vlog" name="theme"></el-checkbox><br />
                <el-checkbox label="测评" name="theme"></el-checkbox><br />
                <el-checkbox label="教程" name="theme"></el-checkbox><br />
                <el-checkbox label="其他" name="theme"></el-checkbox><br />
              </div>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="">
            <div class="formItem">擅长使用的设备</div>
            <el-checkbox-group v-model="form.equipment">
              <div class="checkboxItem">
                <el-checkbox label="单反相机" name="equipment"></el-checkbox><br />
                <el-checkbox label="无人机" name="equipment"></el-checkbox><br />
                <el-checkbox label="手持云台" name="equipment"></el-checkbox><br />
                <el-checkbox label="运动相机" name="equipment"></el-checkbox><br />
                <el-checkbox label="其他" name="equipment"></el-checkbox><br />
              </div>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="">
            <div class="formItem">你是全职内容创造者吗？</div>
            <el-radio-group v-model="form.creator">
              <div class="checkboxItem">
                <el-radio label="是" class="radiotext"></el-radio><br />
                <el-radio label="否" class="radiotext"></el-radio><br />
              </div>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="">
            <div class="formItem">你认为你的内容创作能力属于以下哪个水平？</div>
            <el-radio-group v-model="form.level">
              <div class="checkboxItem">
                <el-radio label="专业" class="radiotext"></el-radio><br />
                <el-radio label="半专业" class="radiotext"></el-radio><br />
                <el-radio label="发烧友" class="radiotext"></el-radio><br />
              </div>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <!-- 合作情况及其他 -->
      <div class="infoFrom" v-if="active==3">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="">
            <div class="formItem">合作情况</div>
            <el-input v-model="form.cooperation" type="textarea" :rows="2" placeholder="请输入合作情况">
            </el-input>
          </el-form-item>
          <el-form-item label="">
            <div class="formItem">其他</div>
            <el-input v-model="form.orther" type="textarea" :rows="2" placeholder="请输入其他内容">
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="btnBox">
        <el-button type="primary" v-if="active!=1" @click="upFun">上一页</el-button>
        <el-button type="primary" v-if="active!=3" @click="nextFun">下一页</el-button>
        <el-button type="primary" v-if="active==3" @click="submitFun">提交</el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: 1,
      form: {
        name: null,
        email: null,
        sex: null,
        city: null,
        // 创作信息
        modality: [],
        theme: [],
        equipment: [],
        creator: null,
        level: null,
        // Cooperation 合作情况
        cooperation: null,
        orther: null,
      },

    }
  },
  mounted() {
    this.toTop();
  },
  methods: {
    toTop() {
      window.scrollTo(0, 0);
    },
    // 下一页
    nextFun() {
      this.active = Number(this.active + 1);
      this.toTop();
    },
    // 上一页
    upFun() {
      this.active = Number(this.active - 1);
      this.toTop();
    },
    // 提交
    submitFun() {
      alert('提交成功')
      console.log(this.form)
    },
  }
}
</script>
<style scoped lang="scss">
.applyNowBox {
  .applyContentBox {
    width: 960px;
    margin: 0 auto;
  }
  .applyTitle {
    font-size: 30px;
    font-weight: bold;
    padding: 50px 0;
  }
  .infoTitle {
    font-size: 20px;
    padding: 20px 0;
    font-weight: bold;
  }
  .applyDesc {
    color: rgba(0, 0, 0, 0.45);
  }
  .step {
    width: 800px;
    height: 64px;
    margin: 0 auto;
    padding: 20px 0;
  }
  .infoFrom {
    padding: 30px 0;
    margin: 20px 0;
    border-top: 1px solid #f4f4f4;
    border-bottom: 1px solid #f4f4f4;
    .formItem {
      width: 390px;
      text-align: left;
      font-size: 14px;
      font-weight: bold;
      margin: 0 auto;
    }
    &::v-deep .el-input__inner {
      width: 390px;
    }
    &::v-deep .el-radio-group {
      width: 390px;
      text-align: left;
    }
    &::v-deep .el-form-item__error {
      width: 390px;
      left: 110px;
    }
    .emailDesc {
      font-size: 12px;
      color: #ccc;
      width: 390px;
      text-align: left;
      margin: 0 auto;
    }
  }
  .btnBox {
    width: 800px;
    margin: 0 auto;
    padding: 40px 0;
  }
}
.checkboxItem {
  width: 390px;
  text-align: left;
  margin: 0 auto;
}
.radiotext {
  padding-bottom: 20px;
}
::v-deep .el-textarea__inner {
  width: 390px;
  margin: 0 auto;
}
</style>